<template>
  <ChartHeader title="危机预警概况" :go-to-detail="goToDetail"></ChartHeader>

  <!-- <van-cell-group inset>
    <van-cell title="学生数量" value="男:520 女:480" />
    <van-cell title="完成测评人数" value="男:480 女:420" />
    <van-cell title="未完成测评人数" value="男:40 女:40" />
    <van-cell title="预警人数" value="男:20 女:20" />
  </van-cell-group> -->
  <div class="wrapper">
    <div class="item">
      <van-image width="38" height="58" fit="cover" :src="boyPNGRef" />
      <ul>
        <li>
          <span class="label">男生人数:</span>
          <span class="value">{{ boy?.num }}</span>
        </li>
        <li>
          <span class="label">预警人数:</span>
          <span class="value red">{{ boy?.levelNum }}</span>
        </li>
      </ul>
    </div>

    <div class="item">
      <van-image width="38" height="58" fit="cover" :src="girlPNGRef" />
      <ul>
        <li>
          <span class="label">女生人数:</span>
          <span class="value">{{ girl?.num }}</span>
        </li>
        <li>
          <span class="label">预警人数:</span>
          <span class="value red">{{ girl?.levelNum }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, defineEmits, defineProps, toRefs } from 'vue'
import { NumData, TotalData } from '../types'
import boyPNG from '../img/boy.png'
import girlPNG from '../img/girl.png'
import { useEvaluationStatus } from '../use/useEvaluationStatus'
import { useRouter } from 'vue-router'
import ChartHeader from './ChartHeader.vue'

const props = defineProps<{
  numData: NumData | null
  totalData: TotalData | null
}>()

const router = useRouter()

function goToDetail() {
  router.push({ name: 'TodoDetail', query: { activeNames: 'warn' } })
}

const boyPNGRef = ref(boyPNG)
const girlPNGRef = ref(girlPNG)

const { boy, girl } = useEvaluationStatus({ numData: toRefs(props).numData })
</script>

<style scoped lang="less">
@import url('./board-common.less');

.wrapper {
  display: flex;
}

.item {
  margin: 20px 20px;
  display: flex;
  font-size: 14px;
  align-items: center;
  color: #363636;
  flex: 1;
  ::v-deep(.van-image) {
    margin-right: 15px;
  }
  ul {
    li {
      line-height: 28px;
      .label {
        // width: 55px;
        text-align: right;
        display: inline-block;
      }
      .value {
        color: #4792c5;
        &.red {
          color: #f46c6c;
        }
      }
    }
  }
}
</style>
